<template>
  <div class="page-container">
    <img class="question-back" src="/static/img/back.gif">
    <img class="question-panel page-container" id="q-img" ref="qImg" src="/static/img/q1.png">
    <img class="question-panel" id="face-img" :src="resAni">
    <div class="answerA answer-common" @click="bind&&selectOpt(false, 'A')">
      <img class="a-option" src="/static/img/q1a.png">
      <img class="a-label" v-if="boolA" :src="labelIcon">
    </div>
    <div class="answerB answer-common" @click="bind&&selectOpt(false, 'B')">
      <img class="a-option" src="/static/img/q1b.png">
      <img class="a-label" v-if="boolB" :src="labelIcon">
    </div>
    <div class="answerC answer-common" @click="bind&&selectOpt(true, 'C')">
      <img class="a-option" src="/static/img/q1c.png">
      <img class="a-label" v-if="boolC" :src="labelIcon">
    </div>
    <div class="answerD answer-common" @click="bind&&selectOpt(false, 'D')">
      <img class="a-option" src="/static/img/q1d.png">
      <img class="a-label" v-if="boolD" :src="labelIcon">
    </div>
    
  </div>
</template>
<script>

export default {
  data () {
    return {
      resAni: '/static/img/high.png',
      labelIcon: '/static/img/correct.png',
      bind: true,
      boolA: false,
      boolB: false,
      boolC: false,
      boolD: false,
    }
  },
  mounted: function() {
    this.$refs.qImg.onload = () => {
      let height = $('#q-img').height()
      let width = $('#q-img').width()
      let answerWidth = width * 0.4
      $(".answer-common").css('width', `${answerWidth}px`)
      // console.log(height)
      let abTop = height * 0.48
      $(".answerA, .answerB").css('top', `${abTop}px`)
      let cdTop = height * 0.58
      $(".answerC, .answerD").css('top', `${cdTop}px`)

      let acLeft = width * 0.06
      $(".answerA, .answerC").css('left', `${acLeft}px`)

      let bdLeft = width * 0.54
      $(".answerB, .answerD").css('left', `${bdLeft}px`)

      let tl = new TimelineLite();
      tl
      .from("#q-img", 0.5, {
        x: "-=500px"
      })
      .from(".answerA, .answerC, .answerB, .answerD", 0.5, {
        x: "+=500px"
      })
      .from("#face-img", 0.5, {
        y: "+=300px"
      })
      
    }
  },
  methods: {
      selectOpt: function(bool, boolEle) {
        this.bind = false
        switch(boolEle) {
          case "A":
            this.boolA = true
            break
          case "B":
            this.boolB = true
            break
          case "C":
            this.boolC = true
            break
          case "D":
            this.boolD = true
            break
        }
        if (bool) {
          console.log(this.$cookie.get('score'))
          this.$cookie.set('score', parseInt(this.$cookie.get('score')) + 1)
          this.labelIcon = '/static/img/correct.png'
          this.resAni = '/static/img/correctExpress.png'
        } else {
          this.labelIcon = '/static/img/error.png'
          this.resAni = '/static/img/errExpress.png'
        }
        
        setTimeout(() => {
          this.$router.push({path: 'question1'})
        }, 1500)

      }
        
    }
}
</script>
